<template>
  <div>
    <app-header></app-header>
    <div class="icon"><img src="../assets/logo.png" alt="#"></div>
    <div class="title">
      <!--<span @click="isLogin = true">登录</span>-->
      <!--<span>|</span>-->
      <!--<span @click="isLogin = false">注册</span>-->
      <span @click="toLogin" :class="{xian:val}">登录<i class="xian"></i></span>
      <span>|</span>
      <span @click="toRegister" :class="{xian:!val}">注册</span>
    </div>
    <!--<login v-if="isLogin"></login>-->
    <!--<register v-if="!isLogin"></register>-->
    <!--动态组件-->
    <component :is=" currentComponent"></component>
  </div>
</template>

<script>
/* eslint-disable import/newline-after-import */

import appHeader from '../components/appHeader';
import login from '../components/login';
import register from '../components/register';
export default {
  name: 'loginReg',
  data() {
    return {
      // isLogin: true,
      currentComponent: login,
      val: true,
    };
  },
  components: { appHeader, login, register },
  methods: {
    toLogin() {
      this.currentComponent = login;
      this.val = true;
    },
    toRegister() {
      this.currentComponent = register;
      this.val = false;
    },
  },
};
</script>

<style lang="scss" scoped>
  @function rem($px,$unit:75){
    @return $px/$unit#{rem}
  }
.icon{
  margin-bottom: rem(93);
}
img{
  width:rem(78);
  height: rem(78);
  display: block;
  margin:0 auto;
}
  .title{
    text-align: center;
    margin-bottom: rem(115);
  }
  span{
    position: relative;
    font-size: rem(32);
    color: #333;
  }
  span:nth-child(1){
    margin-right: rem(94);
  }
  span:nth-child(2){
    color: #ddd;
  }
  span:nth-child(3){
    margin-left: rem(94);
  }
  .xian{
    /*width: 40px;*/
    /*position: absolute;*/
    /*height: rem(7);*/
    /*background: #3d9dfc;*/
    /*top:rem(24);*/
    /*display: inline-block;*/
    border-bottom: rem(7) solid  #3d9dfc;
    color:  #3d9dfc;
  }
</style>
